<template>
    <div class="template">
        <!-- 右边 -->
        <div id="i_InstitutionsTree">
            <el-input
                placeholder="输入关键字进行过滤"
                @clear="initInstitutions"
                clearable
                v-model="filterText">
            </el-input>
            <el-tree
                class="filter-tree-i"
                :data="dataInstitutions"
                :props="defaultInstitutionsProps"
                default-expand-all
                :filter-node-method="filterInstitutionsNode"
                ref="tree"
                show-checkbox
                node-key="institutionsId"
                :check-strictly="true"
                @check-change="handleCheckChange"
                @node-click="nodeClick"
                >
                <!-- 处理菜单内容过长 -->
                <span class="custom-tree-node" slot-scope="{ node }">
                    <el-tooltip class="item" effect="dark" :content="node.label" placement="top-start">
                        <span > {{ node.label | ellipsis(8) }} </span>
                    </el-tooltip>
                </span>
            </el-tree>
        </div>
        <!-- 左边 -->
        <div id="pageList" style=" margin-left: 8px;">
            <div class="addInstitutions">
                <div style="float: left;display: flex;">
                    <el-input
                            @clear="initInstitutions"
                            clearable
                            style="margin-right: 8px;"
                            prefix-icon="el-icon-search"
                            placeholder="请输入机构名称"
                            class="initInstitutions"
                            v-model="InstitutionsPage.institutionsName"
                            @keydown.enter.native="initInstitutionsQuery">
                    </el-input>
                    <el-input
                            @clear="initInstitutions"
                            clearable
                            prefix-icon="el-icon-search"
                            placeholder="请输入机构描述"
                            class="initInstitutions"
                            v-model="InstitutionsPage.institutionsDescribe"
                            @keydown.enter.native="initInstitutionsQuery">
                    </el-input>
                    <!-- 机构类别 -->
                    <el-select style="margin-left: 8px;width:60%" @clear="initInstitutions" v-model="InstitutionsPage.institutionsTypeId" clearable placeholder="请选择机构类别">
                        <el-option
                            v-for="item in institutionsTypeList"
                            :key="item.institutionsTypeId"
                            :label="item.typeName"
                            :value="item.institutionsTypeId">
                        </el-option>
                    </el-select>
                    <el-button style="margin-left: 8px;" icon="el-icon-search" type="info" @click="initInstitutionsQuery">查询</el-button>
                </div>

                <div style="display: flex;justify-content: flex-end">
                    <el-button
                            type="primary"
                            @click="resetCondition"><i class="el-icon-remove"></i><span>重置</span>
                    </el-button>
                    <el-button
                            type="primary"
                            @click="insertInstitutions"><i class="el-icon-add-location"></i><span>新增机构</span>
                    </el-button>
                </div>
            </div>
            <div>
                <el-table
                        :data="InstitutionsList"
                        stripe
                        border
                        style="width: 100%"
                        v-loading="loading"
                        element-loading-text="正在加载..."
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(0, 0, 0, 0.8)"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true"
                            label="机构名称"
                            width="250">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                                <p>机构名称: {{ scope.row.institutionsName }}</p>
                                <p>机构类别: {{ scope.row.typeName }}</p>
                                <p>机构描述: {{ scope.row.institutionsDescribe }}</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ scope.row.institutionsName }}</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="机构类别"
                            width="500">
                        <template slot-scope="scope">
                            <span>{{ scope.row.typeName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :show-overflow-tooltip="true"
                            label="机构描述"
                            width="300">
                        <template slot-scope="scope">
                            <span>{{ scope.row.institutionsDescribe }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="300">
                        <template slot-scope="scope">
                            <el-button
                                    @click="updateInstitutions(scope.row)"><i class="el-icon-edit">编辑</i></el-button>
                            <el-button
                                    type="danger"
                                    @click="deleteInstitutions(scope.row)"><i class="el-icon-delete">删除</i></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button @click="deleteBatchInstitutions" type="danger" style="margin-top: 8px;float: left;" :disabled="this.multipleSelection.length==0"><i class="el-icon-delete">批量删除</i></el-button>
                <div style="display: flex;justify-content: flex-end;margin-top: 8px;">
                    <el-pagination
                            background
                            @current-change="currentChange"
                            @size-change="sizeChange"
                            layout="sizes, prev, pager, next, jumper, ->, total, slot"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- 新增编辑弹框 -->
        <div>
            <el-dialog
                    :title="title"
                    :visible.sync="dialogVisible"
                    width="60%">
                <div>
                    <el-form :model="Institutions" :rules="rules" ref="InstitutionsForm">
                        <el-row>
                            <el-col>
                                <el-form-item label="机构名称:" prop="institutionsName">
                                    <el-input style="margin-left: -163px;width: 850px;" prefix-icon="el-icon-edit" v-model="Institutions.institutionsName"
                                              placeholder="请输入机构名称"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col>
                                <el-form-item label="机构类别:" prop="institutionsTypeId">
                                <el-select style="margin-left: -163px;width: 850px;" v-model="Institutions.institutionsTypeId" clearable placeholder="请选择机构类别">
                                    <el-option
                                        v-for="item in institutionsTypeList"
                                        :key="item.institutionsTypeId"
                                        :label="item.typeName"
                                        :value="item.institutionsTypeId">
                                    </el-option>
                                </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col>
                                <el-form-item label="机构排序:" prop="institutionsSort" style="margin-left: 8px;">
                                    <el-input-number style="margin-left: -163px;width: 850px;" :min="1" prefix-icon="el-icon-edit" v-model="Institutions.institutionsSort"
                                              placeholder="请设置机构排序"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col>
                                <el-form-item label="上级机构:" prop="parentId">
                                    <tree-select style="margin-left: 90px;width: 850px;"
                                    :options="institutionsTreeList"
                                    placeholder="请选择上一级机构"
                                    v-model="Institutions.parentId"
                                    />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col>
                                <el-form-item label="机构描述:" prop="institutionsDescribe" style="margin-left: 8px;">
                                    <el-input style="margin-left: -163px;width: 850px;"
                                    type="textarea"
                                    :rows="3"
                                    v-model="Institutions.institutionsDescribe"
                                    placeholder="请输入机构描述">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="insertInstitutionsRequest">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>

import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
    name:"Institutions",
    components: { TreeSelect },
    data(){
        return{
            loading: false,
            filterText: '',
            // 查询目录属性设置
            defaultInstitutionsProps:{
                children: 'children',
                label: 'institutionsName'
            },
            // 初始化机构目录
            dataInstitutions:[],
            // 封装查询条件
            InstitutionsPage:{
                institutionsDescribe:'',
                institutionsId:'',
                institutionsName:'',
                institutionsTypeId:'',
                pageNum: 1,
                pageSize: 10
            },
            // 初始化列表
            InstitutionsList:[],
            total: 0,
            // 初始化多选复选框
            multipleSelection:[],
            // 编辑新增框数据传输
            Institutions:{
                institutionsDescribe:'',
                institutionsId:'',
                institutionsSort:1,
                institutionsName:'',
                parentId:'init_level',
                institutionsTypeId:'',
            },
            // 弹框初始化设置
            title: '',
            dialogVisible: false,
            // 校验规则
            rules: {
                institutionsName:[{required:true,message:'请输入机构名称',trigger:'blur'},
                                  {
                                    pattern:/^(a-z|A-Z|0-9)*[^$%^&*;:,<>?()\""\']{1,128}$/,
                                    message:'机构名称超过128个字符',
                                    trigger:'blur',
                                  }],
                institutionsTypeId:[{required: true, message: '请选择机构类别', trigger: 'blur'}],
                parentId:[{required: true, message: '请选择上一级机构', trigger: 'blur'}],
                institutionsDescribe:[{
                                        pattern:/^(a-z|A-Z|0-9)*[^$%^&*;:,<>?()\""\']{1,512}$/,
                                        message:'机构描述超过512个字符',
                                        trigger:'blur',
                                      }]
            },
            institutionsTreeList:[],
            institutionsTypeList:[]
        }
    },
    mounted(){
        // 初始化机构列表
        this.initInstitutionsQuery();
        this.initinstitutionsTypeList();
        // 初始化机构目录
        this.selectInitInstitutionsTreeList();
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    methods:{
        // 重置查询条件
        resetCondition(){
            this.$refs.tree.setCheckedNodes([]);
            this.filterText = '';
            this.InstitutionsPage.institutionsDescribe = '';
            this.InstitutionsPage.institutionsId = '';
            this.InstitutionsPage.institutionsName = '';
            this.InstitutionsPage.institutionsTypeId = '';
            this.initInstitutionsQuery();
        },
        // 机构目录选择
        handleCheckChange(data, checked, node){
            if(checked == true){
                this.filterText = data.institutionsName;
                this.InstitutionsPage.institutionsId = data.institutionsId;
                this.$refs.tree.setCheckedNodes([data]);
            }
        },
        nodeClick(data,checked,node){
            this.filterText = data.institutionsName;
            this.InstitutionsPage.institutionsId = data.institutionsId;
            this.$refs.tree.setCheckedNodes([data]);
        },
        // 机构目录节点过滤
        filterInstitutionsNode(value,dataInstitutions){
            if (!value) return true;
            return dataInstitutions.institutionsName.indexOf(value) !== -1;
        },
        // 获取机构目录
        selectInitInstitutionsTreeList(){
            this.getRequest("/account/BtSysInstitutions/select/BtSysInstitutionsTree").then(resp => {
                if (resp) {
                    this.dataInstitutions = resp.data;
                }
            });
        },
        // 初始化机构列表
        initInstitutionsQuery(){
            this.loading = true;
            this.postRequest("/account/BtSysInstitutions/query/BtSysInstitutionsPageList",this.InstitutionsPage).then(resp => {
                this.loading = false;
                if (resp) {
                    this.InstitutionsList = resp.data.list;
                    this.total = resp.data.total;
                }
            });
        },
        initinstitutionsTypeList(){
            this.getRequest("/account/InstitutionsType/select/InstitutionsTypeList").then(resp => {
                if (resp) {
                    this.institutionsTypeList = resp.data;
                }
            });
        },
        // 编辑机构信息
        updateInstitutions(data){
            this.queryBtSysInstitutionsTreeList();
            this.initInstitutionsQuery();
            this.title = '编辑机构信息';
            this.Institutions = data;
            this.dialogVisible = true;
        },
        // 添加机构信息
        insertInstitutions(){
            this.queryBtSysInstitutionsTreeList();
            this.initInstitutions();
            this.title = "添加机构信息";
            this.dialogVisible = true;
        },
        insertInstitutionsRequest(){
            if (this.Institutions.institutionsId) {
                    this.$refs['InstitutionsForm'].validate(valid => {
                        if (valid) {
                            this.putRequest("/account/BtSysInstitutions/update/BtSysInstitutionsInfo", this.Institutions).then(resp => {
                                if (resp) {
                                    this.dialogVisible = false;
                                    this.initInstitutionsQuery();
                                    this.initInstitutions();
                                    this.selectInitInstitutionsTreeList();
                                }
                            })
                        }
                    });
            } else {
                this.$refs['InstitutionsForm'].validate(valid => {
                    if (valid) {
                        this.postRequest("/account/BtSysInstitutions/insert/BtSysInstitutionsInfo", this.Institutions).then(resp => {
                            if (resp) {
                                // 关闭弹框
                                this.dialogVisible = false;
                                // 初始化列表
                                this.initInstitutionsQuery();
                                // 初始化弹框值
                                this.initInstitutions();
                                this.selectInitInstitutionsTreeList();
                            }
                        })
                    }
                });
            }
        },
        // 获取机构目录
        queryBtSysInstitutionsTreeList(){
            this.getRequest("/account/BtSysInstitutions/select/BtSysInstitutionsTree").then(resp => {
                if (resp) {
                    let result = [];
                    let data = resp.data;
                    const children = this.getTree(data);
                    let obj = {}
                    obj.label = '所属机构'
                    obj.id = 'init_level'
                    obj.children = children
                    result.push(obj)
                    this.institutionsTreeList = result;
                }
            });
        },
        // 构建树形数据结构
        getTree (tree) {
            let arr = [];
            if (tree) {
            tree.forEach(item => {
                let obj = {};
                obj.label = item.institutionsName;
                obj.id = item.institutionsId;
                if(item.children&&item.children.length!==0) {
                   obj.children = this.getTree(item.children);
                }
                arr.push(obj);
            });
        }
            return arr;
        },
        // 初始化机构对象
        initInstitutions(){
            this.Institutions.institutionsDescribe='',
            this.Institutions.institutionsId='',
            this.Institutions.institutionsSort=1,
            this.Institutions.institutionsName='',
            this.Institutions.parentId='init_level',
            this.Institutions.institutionsTypeId=''
        },
        // 查询重置
        initInstitutions(){
          this.resetCondition();
        },
        handleSelectionChange(val){
            this.multipleSelection = val;
        },
        // 批量删除机构信息
        deleteBatchInstitutions(){
            this.$confirm('此操作将永久删除【'+this.multipleSelection.length+'】条记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let institutionsId = '?';
                    this.multipleSelection.forEach(item=>{
                        institutionsId += 'institutionsId='+item.institutionsId+'&';
                    })
                    this.deleteRequest("/account/BtSysInstitutions/delete/BatchBtSysInstitutionsInfo"+ institutionsId).then(resp=>{
                        if (resp){
                            this.initInstitutionsQuery();
                            this.selectInitInstitutionsTreeList();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                });
            });
        },
        // 删除机构信息
        deleteInstitutions(data){
            this.$confirm('此操作将永久删除【'+data.institutionsName+'】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/account/BtSysInstitutions/delete/BtSysInstitutionsInfo?institutionsId='+data.institutionsId).then(resp=>{
                        if (resp){
                            this.initInstitutionsQuery();
                            this.selectInitInstitutionsTreeList();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                });
            });
        },
        // 分页
        sizeChange(currentSize) {
            this.InstitutionsPage.pageSize = currentSize;
            this.initInstitutionsQuery();
        },
        currentChange(currentPage) {
            this.InstitutionsPage.pageNum = currentPage;
            this.initInstitutionsQuery();
        }
    }
}
</script>

<style>
    .addInstitutions{
        margin-bottom: 10px;
    }
    #i_InstitutionsTree{
        width: 180px;
        border: 1px solid #E7E7E7;
        height: 730px;
    }
    .filter-tree-i{
        overflow: auto;
        flex: 1;
        width: 170px;
        height: 680px;
        margin:  10px;
    }
     #i_InstitutionsTree #pageList{
        display: flex;
        justify-content: flex-end;
        flex: 1;
    }
    .template{
        display: flex;
    }
</style>
